<!--
 * @Author: huyuhang
 * @Data: 
 * @LastEditors: huyuhang
 * @LastEditTime: 2024-04-17 15:05:20
 * @Description: 写点儿注释
-->
<template>
  <ContentWrap v-loading="loading" class="database-result-wrap">
    <back :backOption="backOption" />
    <el-scrollbar>
      <div class="mt20px pb-10px">
        <el-steps align-center>
          <el-step
            v-for="(item, index) in steps"
            :key="'step' + index"
            :icon="item.status === 4 ? CircleClose : CircleCheck"
            :status="item.status === 4 ? 'error' : 'success'"
            :description="item.result"
            @click="handleStepClick(item)"
          >
            <template #title>
              <div>{{ item.scanTime.split(' ')[0] }}</div>
              <div>{{ item.scanTime.split(' ')[1] }}</div>
            </template>
          </el-step>
        </el-steps>
      </div>
    </el-scrollbar>
    <template v-if="!noData">
      <el-card shadow="never" class="mt-16px">
        <template #header>
          <span>{{ infoOptions.data.datasourceName || '--' }}</span>
        </template>
        <ns-descriptions v-bind="infoOptions" />
      </el-card>
      <logList v-if="showLog" :historyId="historyId" />
      <template v-else>
        <FileServerList
          v-if="Number(route.query.datasourceType) === 2"
          :historyId="historyId"
          :collectionAssetId="collectionAssetId"
        />
        <DatabaseInfo
          v-else
          class="mt-10px"
          :historyId="historyId"
          :info="infoOptions.data"
          :collectionAssetId="collectionAssetId"
        />
      </template>
    </template>
    <template v-else>
      <el-empty>
        <template #description>
          <div class="mb-10"> 暂无数据 </div>
        </template>
      </el-empty>
    </template>
  </ContentWrap>
</template>

<script setup lang="tsx">
import { CircleCheck, Picture, CircleClose } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { DescriptionsProps } from '@/types/descriptions'
import { getTaskDetail } from '@/api/asset/taskManage/database'
import { getCollectHistory } from '@/api/asset/taskManage/dataCollect'
import logList from './components/logList.vue'
import { Hide, View } from '@element-plus/icons-vue'
import FileServerList from './components/fileServerList.vue'
import DatabaseInfo from './components/databaseInfo.vue'

const route = useRoute()
const historyId = ref<string>('')
const showLog = ref<Boolean>(false)

const backOption = ref({
  title: '返回'
})
const loading = ref(true)
const steps = ref([])
const noData = computed(() => steps.value.length === 0)
const infoOptions: DescriptionsProps = reactive({
  border: false,
  column: 3,
  labelSuffix: '：',
  labelWidth: '120px',
  columns: [
    {
      label: '资产IP:端口',
      key: 'scanTemplateId',
      render: (data) => {
        return (
          <>
            <div style="display:flex;align-items:center;justify-content:space-between;width:150px">
              {isShowIp.value ? (
                <span>
                  {data.ip}:{data.port}
                </span>
              ) : (
                <span style="font-size:16px;">***********</span>
              )}
              {isShowIp.value ? (
                <el-icon>
                  <Hide onClick={() => handleShowIp()} />
                </el-icon>
              ) : (
                <el-icon>
                  <View onClick={() => handleShowIp()} />
                </el-icon>
              )}
            </div>
          </>
        )
      }
    },
    { label: '资产类型', key: 'assetTypeName' },
    { label: '库名', key: 'database' },
    { label: '数据来源', key: 'sourceName' },
    { label: '归属系统', key: 'system' },
    { label: '归属机构', key: 'department' },
    { label: '扫描策略模板', key: 'templateName' },
    { label: '启动时间', key: 'startTime' },
    { label: '完成时间', key: 'finishTime' },
    { label: '执行人', key: 'executorName' }
  ],
  data: {}
})
const isShowIp = ref(false)
const handleShowIp = () => {
  isShowIp.value = !isShowIp.value
}
const collectionAssetId = ref('')
const fileColumns = ref([
  {
    label: '资产IP:端口',
    key: 'scanTemplateId',
    render: (data) => {
      return (
        <>
          <div style="display:flex;align-items:center;justify-content:space-between;width:150px">
            {isShowIp.value ? (
              <span>
                {data.ip}:{data.port}
              </span>
            ) : (
              <span style="font-size:16px;">***********</span>
            )}
            {isShowIp.value ? (
              <el-icon>
                <Hide onClick={() => handleShowIp()} />
              </el-icon>
            ) : (
              <el-icon>
                <View onClick={() => handleShowIp()} />
              </el-icon>
            )}
          </div>
        </>
      )
    }
  },
  { label: '资产类型', key: 'assetTypeName' },
  { label: '数据来源', key: 'sourceName' },
  { label: '归属系统', key: 'system' },
  { label: '归属机构', key: 'department' },
  { label: '扫描策略模板', key: 'templateName' },
  { label: '启动时间', key: 'startTime' },
  { label: '完成时间', key: 'finishTime' },
  { label: '执行人', key: 'executorName' }
])
async function getHistoryOverview() {
  loading.value = true
  const data = await getCollectHistory({
    taskId: route.query.taskId,
    collectionAssetId: route.query.collectionAssetId,
    datasourceId: route.query.datasourceId
  })
  steps.value = data
  if (data && data.length) {
    handleStepClick(data[0])
  }
  loading.value = false
}
function handleStepClick(item) {
  infoOptions.data = {}
  historyId.value = item.historyId
  showLog.value = item.status === 4
  collectionAssetId.value = item.collectionAssetId
  initData()
}
function initData() {
  getDatabaseInfo()
}
async function getDatabaseInfo() {
  let data = await getTaskDetail({
    historyId: historyId.value,
    collectionAssetId: route.query.collectionAssetId || collectionAssetId.value,
    datasourceId: route.query.datasourceId
  })
  infoOptions.data = data
}
onMounted(async () => {
  if (route.query.datasourceType == '2') {
    infoOptions.columns = fileColumns.value
  }
  getHistoryOverview()
})
</script>
<style lang="scss">
.database-result-wrap {
  .el-step {
    cursor: pointer;
    min-width: 90px;
  }
  .el-step__title {
    line-height: 18px;
    font-size: 12px;
    margin-bottom: 6px;
  }
  .el-card__header {
    padding: 10px 16px;
  }
  .el-descriptions__table {
    width: 100%;
  }
  .el-descriptions__label {
    color: #606266;
  }
  .el-descriptions__content {
    font-size: 14px;
    vertical-align: top;
    color: #606266;
  }
}
</style>
